import {
  DeleteOutlined,
  PaperClipOutlined,
  RedoOutlined,
} from '@ant-design/icons';
import { Button, Progress } from 'antd';
import { fileSizeRender } from '../utils/showFileSize';
import { ItemRenderProps } from './interface';

export function InfoItem({ file, remove }: ItemRenderProps) {
  const status = file.status ?? 'done';
  const filename = file.originFileObj?.name ?? file.name ?? file.fileName;
  const fileSize = fileSizeRender(file.originFileObj?.size ?? file.size);
  const rePush =
    typeof file.response === 'function' ? file.response : undefined;
  const percent = file.percent;

  let renderItem = (
    <>
      <PaperClipOutlined style={{ flexShrink: 0 }} />
      <div
        style={{
          flexGrow: 1,
          color: status === 'error' ? 'red' : undefined,
          overflow: 'hidden',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
        }}
        title={filename}
      >
        {filename}
      </div>
      <div style={{ flexShrink: 0 }}>{fileSize}</div>
      <div hidden={status !== 'uploading'} style={{ flexShrink: 0, width: 80 }}>
        <Progress percent={percent} style={{ margin: 0 }} />
      </div>
      <div hidden={status === 'uploading'} style={{ flexShrink: 0 }}>
        {rePush ? (
          <Button
            type="text"
            size="small"
            onClick={rePush}
            style={{ cursor: 'pointer' }}
            icon={<RedoOutlined />}
          >
            重试
          </Button>
        ) : null}
        <Button
          type="text"
          size="small"
          icon={<DeleteOutlined className="action-icon" />}
          onClick={remove}
        >
          删除
        </Button>
      </div>
    </>
  );

  return (
    <div className={`ant-upload-list-item ant-upload-list-item-${status}`}>
      {renderItem}
    </div>
  );
}
